<template>
  <a-modal
    :maskClosable="maskClosable"
    title="编辑基础设施"
    :width="600"
    :visible="visible"
    :confirm-loading="confirmLoading"
    @ok="handleOk"
    @cancel="handleCancel"
    cancelText="关闭"
  >
    <a-spin :spinning="confirmLoading">
      <a-form :form="form" :labelCol="labelCol" :wrapperCol="wrapperCol">
        <a-form-item label="数据中心">
<!--          <a-input :value="this.model.datacenterName" readOnly></a-input>-->
          <span class="ant-form-text">{{this.model.datacenterName}}</span>
        </a-form-item>
        <a-form-item label="设备类型">
<!--          <a-input :value="this.model.typeCnName" readOnly></a-input>-->
          <span class="ant-form-text">{{this.model.typeCnName}}</span>
        </a-form-item>
<!--        <a-form-item label="数据中心">
          <a-select v-decorator="['datacenterId', decoratorOptions.datacenterId]">
            <a-select-option v-for="d in datacenterList" :key="d.id">{{ d.name }}</a-select-option>
          </a-select>
        </a-form-item>
        <a-form-item label="设备类型">
          <a-select v-decorator="['type', decoratorOptions.type]">
            <a-select-option v-for="t in typeData" :key="t.key">{{t.name}}</a-select-option>
          </a-select>
        </a-form-item>-->
        <a-form-item label="设备名称">
          <a-input autocomplete="off" v-decorator="['name', decoratorOptions.name]" />
        </a-form-item>
        <a-form-item label="设备厂商">
          <a-input autocomplete="off" v-decorator="['deviceManufacturer', decoratorOptions.deviceManufacturer]"/>
        </a-form-item>
        <a-form-item label="设备型号">
          <a-input autocomplete="off" v-decorator="['deviceModel', decoratorOptions.deviceModel]"/>
        </a-form-item>
        <a-form-item label="资源序列号">
          <a-input autocomplete="off" v-decorator="['esn', decoratorOptions.esn]"/>
        </a-form-item>
      </a-form>
    </a-spin>
  </a-modal>
</template>
<script>
import { gPostAction } from '@/api/manage'
export default {
  name: 'EditModal',
  data() {
    return {
      visible: false,
      confirmLoading: false,
      form: this.$form.createForm(this),
      model: {},
      typeData: [
        {
          key:1,
          name: '空调',
        },
        {
          key:2,
          name: 'UPS',
        },
        {
          key:5,
          name: '机柜',
        },
        {
          key:8,
          name: '配电箱',
        },
      ],
      datacenterList: [],
      labelCol: {
        xs: { span: 24 },
        sm: { span: 5 },
      },
      wrapperCol: {
        xs: { span: 24 },
        sm: { span: 16 },
      },
      url: {
        datacenterPage: '/asset/pageDatacenter',
        updateDevice:'/asset/updateDevice',
      },
      maskClosable: false,
      decoratorOptions: {
        datacenterId: {
          rules: [{ required: true, message: "请选择数据中心" }],
        },
        type: {
          rules: [{ required: true, message: "请选择设备类型" }],
        },
        name: {
          rules: [
            { required: true, message: "请输入设备名称" },
            { validator: this.validators.noWhitespace(), },
            { validator: this.validators.noIllegalString() },
            { max: 10, message: "长度在 1 到 10 个字符", trigger: "blur" },
          ],
        },
        deviceManufacturer: {
          rules: [
            { required: true, message: "请输入设备厂商" },
            { validator: this.validators.noWhitespace(), },
            { validator: this.validators.noIllegalString() },
            { max: 10, message: "长度在 1 到 10 个字符", trigger: "blur" },
          ],
        },
        deviceModel: {
          rules: [
            { required: true, message: "请输入设备型号" },
            { validator: this.validators.noWhitespace(), },
            { validator: this.validators.noIllegalString() },
            { max: 10, message: "长度在 1 到 10 个字符", trigger: "blur" },
          ],
        },
        esn: {
          rules: [
            { required: true, message: "请输入资源序列号" },
            { validator: this.validators.noWhitespace(), },
            { validator: this.validators.noIllegalString() },
            { max: 10, message: "长度在 1 到 10 个字符", trigger: "blur" },
          ],
        },
      },
    }
  },
  methods: {
    loadDatacenterList() {
      return new Promise((resolve, reject) => {
        gPostAction(this.url.datacenterPage, {}).then((res) => {
          if (res.success) {
            this.datacenterList = res.data.list
            resolve(res)
          } else {
            reject(res)
          }
        })
      })
    },
    edit(record) {
      this.model = Object.assign(this.model, record)
      this.loadDatacenterList().finally(() => {
        this.form.setFieldsValue({
          // datacenterId: record.datacenterId,
          // type: record.type,
          name: record.name,
          deviceManufacturer: record.deviceManufacturer,
          deviceModel: record.deviceModel,
          esn: record.esn
        })
      })
      this.visible = true
    },
    handleOk(e) {
      this.form.validateFields((err,values)=>{
        if (!err) {
          this.confirmLoading = true
          const postData = {
            id: this.model.id,
            datacenterId: this.model.datacenterId,
            type: this.model.type,
            name: values.name,
            deviceManufacturer:values.deviceManufacturer,
            deviceModel:values.deviceModel,
            esn:values.esn,
            title: "精确管控与供电制冷联动-基础资源细粒度感知-资源管理-L1层：基础设施"
          }
          gPostAction(this.url.updateDevice, postData)
            .then((res) => {
              if (res.success) {
                this.$message.success('操作成功')
                this.$emit('ok')
              }
            })
            .finally(() => {
              this.confirmLoading = false
              this.handleCancel()
            })
        }
      })

    },
    handleCancel(e) {
      this.visible = false
    },
  },
}
</script>
